<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>
			<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			 .oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="mui-title" class="mui-title">党员列表</h1>
		</header>
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<br /><br />
					<ul id="test" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/util.js"></script>

	<script>
		var showPageTotal=100;
		var showPageNum=1;
		
		var wv = plus.webview.currentWebview(); //获取当前窗口的WebviewObject对象
		
		mui.init({
			swipeBack: true,
			pullRefresh:{
			    container:'#pullrefresh',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
			    up : {
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			}
		});
		
		
		function pulldownRefresh() {
			var  endPullupToRefreshs = new Boolean(false);
			setTimeout(function() {
			    //业务逻辑代码，比如通过ajax从服务器获取新数据；
			    showPageNum=++showPageNum;
				
				//业务数据获取完毕，并已插入当前页面DOM；
				//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
				//通过event.detail可获得传递过来的参数内容
				var groupId = wv.groupId;
				var groupName=wv.groupName;
				
				//发送数据
				var data = {
					pageNum: showPageNum,
					pageSizes: showPageTotal,
					groupId: groupId,
				};
				//发送请求事件
				mui.ajax({
					url: getGroupList,
					type: "get",
					data: data,
					async: true,
					dataType: "json",
					headers: {
						accept: "application/json;charset=UTF-8"
					},
					success: function(data) {
						data = eval(data);
						var table = document.body.querySelector('.mui-table-view');
	
						
						mui.each(data.data, function(unit, value) {
							var li = document.createElement('li');
							li.className = 'mui-table-view-cell data-ryId="' + value.ryid + '"';
							var liContent ='<div class="mui-slider-cell">'+
										'<div class="oa-contact-cell mui-table">'+
											'<div class="oa-contact-avatar mui-table-cell">'+
												'<img src="images/60x60.gif" />'+
											'</div>'+
											'<div class="oa-contact-content mui-table-cell">'+
												'<div class="mui-clearfix">'+
													'<h4 class="oa-contact-name">'+value.xm+'</h4>'+
													'<span class="oa-contact-position mui-h6">'+value.post+'</span>'+
												'</div>'+
												'<p class="oa-contact-email mui-h6">'+value.sjhm+'</p>'+
											'</div>'+
										'</div>'+
									'</div>';
							li.innerHTML =liContent;
							//下拉刷新，新纪录插到最后面；
							table.appendChild(li);
						});
						
						if(data.pageNum>=data.pageCount){
							endPullupToRefreshs= new Boolean(true);
						}
					}
					
				})
			    mui.toast('下拉刷新成功');
			    //注意：
			    //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
			    //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
			    setTimeout(function(){
			    	mui('#pullrefresh').pullRefresh().endPullupToRefresh(endPullupToRefreshs);
			    },500)
		    }, 1000);
		}
			
		(function($) {
			//设置全局beforeSend
			$.ajaxSettings.beforeSend = function(xhr, setting) {
				//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
				console.log('beforeSend:::' + JSON.stringify(setting));
			};
			//设置全局complete
			$.ajaxSettings.complete = function(xhr, status) {
				console.log('complete:::' + status);
			}
			
			window.onload = function() {
				//加载当前页数据
				showData(showPageNum,showPageTotal);
				
				function showData(pageNum,pageSizes){
					//从服务器获取数据
					var wv = plus.webview.currentWebview(); //获取当前窗口的WebviewObject对象
					//业务数据获取完毕，并已插入当前页面DOM；
					//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
					//通过event.detail可获得传递过来的参数内容
					var groupId = wv.groupId;
					var groupName=wv.groupName;
					//发送数据
					var data = {
						pageNum: pageNum,
						pageSizes: pageSizes,
						groupId: groupId,
					};
					mui.ajax({
						url: getGroupList,
						type: "get",
						data: data,
						async: true,
						dataType: "json",
						headers: {
							accept: "application/json;charset=UTF-8"
						},
						success: function(data) {
							data = eval(data);
							var temp = '';
							mui.each(data.data, function(unit, value) {
//								temp += '<li class="mui-table-view-cell" data-ryId="' + value.ryId + '">' +
//									'<a class="mui-navigate-right"><span class="mui-badge mui-badge-danger">' + value.xb +
//									'</span>' + value.xm + '</a></li>';
									
								temp +='<li class="mui-table-view-cell" data-ryId="'+value.ryid+'">'+
											'<div class="mui-slider-cell">'+
												'<div class="oa-contact-cell mui-table">'+
													'<div class="oa-contact-avatar mui-table-cell">'+
														'<img src="images/60x60.gif" />'+
													'</div>'+
													'<div class="oa-contact-content mui-table-cell">'+
														'<div class="mui-clearfix">'+
															'<h4 class="oa-contact-name">'+value.xm+'</h4>'+
															'<span class="oa-contact-position mui-h6">'+value.post+'</span>'+
														'</div>'+
														'<p class="oa-contact-email mui-h6">'+value.sjhm+'</p>'+
													'</div>'+
												'</div>'+
											'</div>'+
										'</li>';
	
							});
							var test=document.getElementById("test");
							if(test.innerText==""){
								test.innerHTML = temp;
							}else{
								test.innerHTML = test.innerHTML +temp;
							}
							
							document.getElementById("mui-title").innerHTML = groupName;
						}
					})
					mui.plusReady(function() {
						//关闭等待框
						plus.nativeUI.closeWaiting();
						//显示当前页面
						mui.currentWebview.show();
					});
				}
			}
			
			
			
			mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
				//获取id
				var ryId = this.getAttribute("data-ryId");
				//打开新闻详情
				mui.openWindow({					
					url: 'data-dyUserDetail.html',
					extras:{
				      ryId:ryId,
				   },
				   createNew:false
				});
			})

		})(mui);
	</script>

</html>